const templateStr = `
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .templateContainer {
        margin: 0 auto;
        height: 50%;
        display: flex;
    }
    .tempBox {  
        margin: 10px;
        background-color: red;
    }
</style>
<div class="templateContainer">
    <div class="tempBox">
        box1
    </div>
    <div class="tempBox">
        box2
    </div>
</div>
`

customElements.define('my-component',
    class extends HTMLElement{
        constructor() {
            super();
            const shadow = this.attachShadow({
                mode: 'open'
            });
            const template = document.createElement('template');
            template.innerHTML = templateStr;
            console.log(template)
            const templateContent = template.content;
            shadow.appendChild(
                templateContent.cloneNode(true)
            )
        }
    });